<template>
	<view>
		<view class="lucky-draw" :style="scale">
			<image class="lucky-draw__bg" src="@/static/lottery/bg.png" mode="widthFix" style="width: 750rpx;"></image>
			<img src="../../static/lottery-turntable/lottery-turntable.png" class="lucky-draw__bgHeader" alt="" />
			<view class="lucky-draw__objects" :style="rotateStyle">
				<image src="@/static/lottery-turntable/2.png" class="lucky-draw__objects__bg"></image>
				<view class="lucky-draw__objects__object" v-for="(item, index) in prize_arr" :key="index" :style="{
		      transform: `translate(-50%) rotate(${(360 / 8) * index}deg)`,
		    }">
			
					<view class="lucky-draw__objects__object__title">{{ item.name }}</view>
					<image class="lucky-draw__objects__object__icon" :src="item.goodImage"></image>
				</view>
			</view>
			<image class="lucky-draw__start" src="@/static/lottery-turntable/3.png" @click="starta()"></image>
		</view>
		<view class="draw-bottom">活动最终解释权归本店所有</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userdata: {
					openId: '',
					token: ''
				},
				activityId: '',
				prize_goodId:'',
				prize_data:'',
				prize_arr: [{
						id: '1',
						name: "谢谢惠顾",
						probability: 10,
						goodImage: "../../static/lottery/th.jpg",
						goodId:"",
						type: "1"
					},
					{
						id: 2,
						name: "谢谢惠顾",
						probability: 20,
						goodImage: "../../static/lottery/th.jpg",
						goodId:"",
						type: "2"
					},
					{
						id: 3,
						name: "谢谢惠顾",
						probability: 1,
						goodImage: "../../static/lottery/th.jpg",
						goodId:"",
						type: "1"
					},
					{
						id: 4,
						name: "谢谢惠顾",
						probability: 80,
						goodImage: "../../static/lottery/th.jpg",
						goodId:"",
						type: "2"
					},
					{
						id: 5,
						name: "谢谢惠顾",
						probability: 0,
						goodImage: "../../static/lottery/th.jpg",
						goodId:"",
						type: "1"
					},
					{
						id: 6,
						name: "谢谢惠顾",
						probability: 1,
						goodImage: "../../static/lottery/th.jpg",
						goodId:"",
						type: "1"
					},
					{
						id: 7,
						name: "谢谢惠顾",
						probability: 0,
						goodImage: "../../static/lottery/th.jpg",
						goodId:"",
						type: "1"
					},
					{
						id: 8,
						name: "谢谢惠顾",
						probability: 0,
						goodImage: "../../static/lottery/th.jpg",
						goodId:"",
						type: "1"
					}
				],
				isStart: true,//为了不连续点击
				rotateAngle: 0, // 旋转角度
				cycle: 1, // 第几次抽奖
				isfinish:false,
				isgetPrize:false
			};
		},
		computed: {
			rotateStyle() {
				return `
        -webkit-transition: transform ${this.duration}ms ${this.mode};
        transition: transform ${this.duration}ms ${this.mode};
        -webkit-transform: rotate(${this.rotateAngle}deg);
            transform: rotate(${this.rotateAngle}deg);`;
			},
			scale() {
				return `transform: scale(${this.size / 686})`;
			},
		},
		props: {
			duration: {
				// 总旋转时间 ms级
				type: Number,
				default: 5000,
			},
			circle: {
				// 旋转圈数
				type: Number,
				default: 5,
			},
			mode: {
				// 由快到慢 惯性效果都省了
				type: String,
				default: "cubic-bezier(0.2, 0, 0, 1)",
			},
			size: {
				type: Number,
				default: 686,
			},
			config: {
				type: Object,
				default: () => ({}),
			},
			type: {
				type: Number,
				default: 0,
			},
		},
		created() {
			
		},
		onLoad(options) {
			this.getStorage()
			this.activityId = options.activityId
			this.getPrizeByActId(this.activityId)
		},
		methods: {
			async getPrizeByActId() {
				await this.$myRequest({
					url: '/organizer/getPrizeByActivityId',
					method: 'GET',
					header: {
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: {
						activityId: this.activityId
					},
				}).then(res => {
					console.log(res)
					let data = res.data.data
					for (let i = 0, j = 0; j < data.length; i++) {
						this.prize_arr[i].activityId = data[j].activityId
						this.prize_arr[i].businessId = data[j].businessId
						this.prize_arr[i].goodId = data[j].goodId
						this.prize_arr[i].goodImage = data[j].goodImage
						this.prize_arr[i].name = data[j].goodName
						j++;
					}
					console.log(this.prize_arr, 'prize_arr');
				}).catch(err => {
					console.log(err)
				})
			},
			async getStorage() {
				const openId = uni.getStorageSync('openId')
				const token = uni.getStorageSync('token')
				this.userdata.openId = openId
				this.userdata.token = token
				console.log(this.userdata.token, 'token');
			},
			async getPrizeByActId() {
				await this.$myRequest({
					url: '/organizer/getPrizeByActivityId',
					method: 'GET',
					header: {
						Authorization: this.userdata.token,
						'content-type': 'application/x-www-form-urlencoded',
					},
					data: {
						activityId: this.activityId
					},
				}).then(res => {
					console.log(res)
					this.prize_data=res.data.data
					let data = res.data.data
					for (let i = 0, j = 0; j < data.length; i++) {
						this.prize_arr[i].activityId = data[j].activityId
						this.prize_arr[i].businessId = data[j].businessId
						this.prize_arr[i].goodId = data[j].goodId
						this.prize_arr[i].goodImage = data[j].goodImage
						this.prize_arr[i].name = data[j].goodName
						j++;
					}
					console.log(this.prize_arr, 'prize_arr');
				}).catch(err => {
					console.log(err)
				})
			},
			getPrizeDrawId() {
				return new Promise((resolve, reject) => {
					this.$myRequest({
						url: '/user/lotteryDraw',
						method: 'POST',
						header: {
							Authorization: this.userdata.token,
							'content-type': 'application/x-www-form-urlencoded',
						},
						data: {
							openId: this.userdata.openId,
							activityId: this.activityId
						},
					}).then(res => {
						console.log(res.data.data, '获奖奖品');
						this.prize_goodId=res.data.data
						if(this.prize_goodId==-1){
							this.isgetPrize=false
							resolve(this.prize_data.length+1)
						}
						else{
							this.isgetPrize=true
							let prizeIdx = this.prize_arr.findIndex((item) => item.goodId === res.data.data)
							resolve(prizeIdx + 1)
						}

					}).catch(err => {
						console.log(err)
					})
				})
			},
			async starta() {
				if(this.isfinish&&this.isgetPrize){
					uni.showModal({
						title: '提示',
						content: '恭喜中奖！',
						cancelText: "取消", // 取消按钮的文字  
						confirmText: "填写订单", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#39B54A',
						success: (res) => {
							if (res.confirm) {
								// console.log('comfirm') //点击确定
								uni.navigateTo({
									url: '/pages/myorder-submit/myorder-submit?goodId='+this.prize_goodId+'&activityId='+this.activityId,
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							} else {
								console.log('cancel') //点击取消
							}
						}
					})
				}
				else if(this.isfinish&&!this.isgetPrize){
					uni.showToast({
						title: '您的手气不好，再看看其他活动吧',
						icon: 'none'
					})
				}
				if(!this.isfinish){
					let prize_id = await this.getPrizeDrawId()
					console.log(prize_id, 'prize_id');
					if(this.isStart){
						// var ida = Math.ceil(Math.random()*10);
						var ida=prize_id
						//这里我是写的一个随机数。
						//当后台返回我所获得的奖项id，根据id和数组里的比较，相等则旋转到奖品角度
						this.isStart = false;
						this.rotateAngle =
									this.circle * 360 * this.cycle -
									(360 / 8 +
										(this.prize_arr.findIndex((item) => item.id == ida) -
											1) *
										(360 / 8));
								this.cycle++;
								setTimeout(() => {
									this.prize_arr.forEach((item)=>{
										if(item.id == ida ){
											setTimeout(()=>{
												if(this.isgetPrize){
													uni.showModal({
														title: '提示',
														content: '恭喜中奖！',
														cancelText: "取消", // 取消按钮的文字  
														confirmText: "填写订单", // 确认按钮的文字  
														showCancel: true, // 是否显示取消按钮，默认为 true
														confirmColor: '#f55850',
														cancelColor: '#39B54A',
														success: (res) => {
															if (res.confirm) {
																// console.log('comfirm') //点击确定
																uni.navigateTo({
																	url: '/pages/myorder-submit/myorder-submit?goodId='+this.prize_goodId+'&activityId='+this.activityId,
																	success: res => {},
																	fail: () => {},
																	complete: () => {}
																});
															} else {
																console.log('cancel') //点击取消
															}
															this.isfinish=true
														}
														
													})
												}else{
													uni.showToast({
														title: '您的手气不好，再看看其他活动吧',
														icon: 'none'
													})
												}
											},1200)
										}
									})
								}, 6000)
					}
				}

			},
		},
	};
</script>
<style scoped lang="scss">

	.lucky-draw {
		position: relative;
		width: fit-content;
		&__bg {
			top:0;
			// width: 686rpx;
			display: block;
			z-index: -1;
		}
		
		&__bgHeader{
			position: absolute !important;
			width: 600rpx;
			height: 500rpx;
			top:50rpx;
			left: 90rpx;
			// display: block;
		}
		&__lights {
			position: absolute !important;
			width: 676rpx;
			left: 6rpx;
			top: 10rpx;
			display: block;
			animation: infinite 1s alternate lights steps(1, end);
		}

		&__objects {
			position: absolute;
			top:30%;
			left: 135rpx;
			right: 63rpx;
			bottom: 78rpx;
			width: 500rpx;
			height: 500rpx;

			&__bg {
				position: absolute;
				width: 500rpx;
				height: 500rpx;
			}

			&__object {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 0;
				transform-origin: 50% 250rpx;

				&__title {
					margin-top: 62rpx;
					color: #4E0691;
					font-size: 20rpx;
					-webkit-transform: scale(0.7);
				}

				&__icon {
					width: 52rpx;
					height: 52rpx;
					display: block;
					margin: 18rpx auto 0;
				}
			}
		}

		&__start {
			width: 150rpx;
			height: 170rpx;
			display: block;
			position: absolute;
			left: 310rpx;
			top: 584rpx;
		}
	}

	@keyframes lights {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(15deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}
	
	.HeaderImg {
		/* position: absolute; */
		width: 300px;
		height: 170px;
		left: 50%;
	}
</style>

<style>
	.draw-bottom{
		width:100%;
		position: absolute;
		text-align: center;
		bottom: 100rpx;
	}
</style>